<template>
    <div class="container">
        <h1 class="tip">确认挂号信息</h1>
        <!-- 卡片：展示就诊人信息 -->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>请选择就诊人</span>
                    <el-button type="primary" size="default" :icon="User" @click="goUser">添加就诊人</el-button>
                </div>
            </template>
            <!-- 卡片身体部分展示就诊人信息 -->
            <div class="user">
                <Visitor @click="changeIndex(index)" v-for="(user, index) in userArr" :key="user.id" class="item"
                    :currentIndex="currentIndex" :index="index" :user="user" />
            </div>
        </el-card>
        <!-- 卡片：展示医生信息 -->
        <el-card class="box-card">
            <!-- 卡片头部 -->
            <template #header>
                <div class="card-header">
                    <span>挂号信息</span>
                </div>
            </template>
            <!-- 卡片身体 -->
            <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊日期：
                        </div>
                    </template>
                    {{ docInfo.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊医院：
                        </div>
                    </template>
                    {{ docInfo.param?.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊科室：
                        </div>
                    </template>
                    {{ docInfo.param?.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生姓名：
                        </div>
                    </template>
                    {{ docInfo.docname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生职称：
                        </div>
                    </template>
                    {{ docInfo.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生专长：
                        </div>
                    </template>
                    {{ docInfo.skill }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医事服务费：
                        </div>
                    </template>
                    <span style="color: red;">{{ docInfo.amount }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <!-- 确定挂号按钮 -->
        <div class="btn">
            <el-button @click="submitOrder" type="primary" size="default"
                :disabled="currentIndex == -1 ? true : false">确认挂号</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqSubmitOrder } from '@/api/user/index'
import { User } from '@element-plus/icons-vue'
import { reqGetUser, reqDoctorInfo } from '@/api/hospital/index'
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
let $route = useRoute()
let $router = useRouter()
// 存储就诊人信息
let userArr = ref<any>([])
// 存储医生信息
let docInfo = ref<any>({})
// 存储用户切断就诊人索引值
let currentIndex = ref(-1)
onMounted(() => {
    fetchUserData()
    fetchInfo()
})
// 获取就诊人信息
const fetchUserData = async () => {
    let result = await reqGetUser()
    if (result.code == 200) {
        userArr.value = result.data
    }
}
// 获取医生信息
const fetchInfo = async () => {
    let result = await reqDoctorInfo($route.query.docId)
    if (result.code == 200) {
        docInfo.value = result.data
    }
}
// 点击就诊人子组件的回调
const changeIndex = (index: any) => {
    currentIndex.value = index
}
// 确定挂号按钮的回调
const submitOrder = async () => {
    // 医院编号
    let hoscode = docInfo.value.hoscode
    // 医生的id
    let scheduleId = docInfo.value.id
    // 就诊人的id
    let patientId = userArr.value[currentIndex.value].id
    let result = await reqSubmitOrder(hoscode, scheduleId, patientId)
    if (result.code == 200) {
        $router.push({ path: '/user/order', query: { orderId: result.data } })
    } else {
        ElMessage({ type: 'error', message: result.message })
    }
}
// 预约挂号添加就诊人按钮回调
const goUser = () => {
    $router.push({ path: '/user/patient', query: { type: 'add' } })
}
</script>

<style scoped lang="scss">
.container {
    .tip {
        font-weight: 900;
        color: #7f7f7f;
        font-size: 20px;
    }

    .box-card {
        margin: 20px 0px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user {
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 32%;
                margin: 5px;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        margin: 10px 0px;
    }
}
</style>